<template>
    <div ref="container" class="container">
      <van-tabs v-model="activeTab">
        <van-tab title="2014"  class="custom-tabs">
        </van-tab>
        <van-tab title="2015"></van-tab>
        <van-tab title="2016"></van-tab>
        <van-tab title="2017"></van-tab>
        <van-tab title="2018"></van-tab>
        <van-tab title="2019"></van-tab>
        <van-tab title="2020"></van-tab>
        <van-tab title="2021"></van-tab>
        <van-tab title="2022"></van-tab>
      </van-tabs>
      <swiper
      :modules="modules"
      :slides-per-view="3"
      :space-between="50"
      direction="vertical"
      class="custom-swiper"
      :pagination="{ clickable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :loop="true"
    >
      <swiper-slide class="custom-swiper-slide">
        <div class="sw-flex">
          <div class="sw-flex-no-active"></div>
          <div
            class="sw-fleximg"
            style="
              background-image: url('https://cms-meeting.xuexiqh.cn/h5-client/static/img/2.366a5050.png');
            "
          ></div>

          <div class="sw-flex-r">
            <div class="tit">2018年10月22日至26日</div>
            <div class="tit">北京</div>
            <div class="tit">
              代表人数：2009人；特邀代表84人
              <div class="more">更多→</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="custom-swiper-slide">

        <div class="sw-flex">
        <div class="sw-flex-no-active"></div>

          <div
            class="sw-fleximg"
            style="
              background-image: url('https://cms-meeting.xuexiqh.cn/h5-client/static/img/pic07.331cab92.png');
            "
          ></div>

          <div class="sw-flex-r">
            <div class="tit">2018年10月22日至26日</div>
            <div class="tit">北京</div>
            <div class="tit">
              代表人数：2009人；特邀代表84人
              <div class="more">更多→</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="custom-swiper-slide">

        <div class="sw-flex">
        <div class="sw-flex-no-active"></div>

          <div
            class="sw-fleximg"
            style="
              background-image: url('https://cms-meeting.xuexiqh.cn/h5-client/static/img/pic08.75771f69.png');
            "
          ></div>

          <div class="sw-flex-r">
            <div class="tit">2018年10月22日至26日</div>
            <div class="tit">北京</div>
            <div class="tit">
              代表人数：2009人；特邀代表84人
              <div class="more">更多→</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="custom-swiper-slide">

        <div class="sw-flex">
        <div class="sw-flex-no-active"></div>

          <div
            class="sw-fleximg"
            style="
              background-image: url('https://cms-meeting.xuexiqh.cn/h5-client/static/img/pic09.ab176c59.png');
            "
          ></div>

          <div class="sw-flex-r">
            <div class="tit">2018年10月22日至26日</div>
            <div class="tit">北京</div>
            <div class="tit">
              代表人数：2009人；特邀代表84人
              <div class="more">更多→</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <!-- <swiper-slide class="custom-swiper-slide"
        ><img
          src="https://cms-meeting.xuexiqh.cn/h5-client/static/img/pic07.331cab92.png"
          draggable="false"
      /></swiper-slide>
      <swiper-slide class="custom-swiper-slide"
        ><img
          src="https://cms-meeting.xuexiqh.cn/h5-client/static/img/pic08.75771f69.png"
          draggable="false"
      /></swiper-slide>
      <swiper-slide class="custom-swiper-slide"
        ><img
          src="https://cms-meeting.xuexiqh.cn/h5-client/static/img/pic09.ab176c59.png"
          draggable="false"
      /></swiper-slide> -->
    </swiper>

    </div>
  </template>
  
  <script>
  import { Tab, Tabs } from 'vant';
  import { Thumbs } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
  import { ref, onMounted } from 'vue';
  
  import 'swiper/css/bundle';
  import 'swiper/css';
  import * as THREE from 'three';
  
  export default {
    components: {
      Tab,
      Tabs,
      Swiper,
      SwiperSlide,
    },
    setup() {
      const activeTab = ref(0);
  
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
  
      const onSlideChange = () => {
        console.log('slide change');
      };
  
      const modules = [Navigation, Pagination, Scrollbar, A11y];
  
      onMounted(() => {
     // 创建场景
     const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const container = document.querySelector('.container');
container.appendChild(renderer.domElement);

// 创建星星几何体
const starGeometry = new THREE.BufferGeometry();
const starVertices = [];
const starColors = [];
for (let i = 0; i < 10000; i++) {
  const x = THREE.MathUtils.randFloatSpread(10);
  const y = THREE.MathUtils.randFloatSpread(10);
  const z = THREE.MathUtils.randFloatSpread(10);
  starVertices.push(x, y, z);

  // 随机生成颜色
  const r = Math.random();
  const g = Math.random();
  const b = Math.random();
  starColors.push(r, g, b);
}
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
starGeometry.setAttribute('color', new THREE.Float32BufferAttribute(starColors, 3));

// 创建星星材质
const starMaterial = new THREE.PointsMaterial({
  vertexColors: true, // 启用顶点颜色
  size: 0.01,
});

// 创建星星点云
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  stars.rotation.y += 0.001;
  renderer.render(scene, camera);
}
// animate();
    });
  
      return {
        onSwiper,
        onSlideChange,
        modules,
        activeTab,
      };
    },
  };
  </script>
<style>
.custom-tabs {
  background-color: transparent;
}

.custom-swiper {
  height: 600px;
}

.custom-swiper-slide {
  border-radius: 10px;
  transform: perspective(1000px) rotateX(45deg) scale(0.8) !important;
  transition: transform 0.3s;
}

.custom-swiper-slide-active {
  transform: perspective(1000px) rotateX(0) scale(1) !important;
}
.custom-swiper-slide img {
  width: 100%;
}
.custom-swiper-slide-next,
.custom-swiper-slide-prev {
  transform: perspective(1000px) rotateX(90deg) scale(0.8) !important;
}

.custom-swiper .swiper-slide-prev {
}

.custom-swiper .swiper-slide-next {
  transform: translateX(0) !important;
  width: 80%;
}
.custom-swiper-slide:not(.custom-swiper-slide-active) {
  /* opacity: 0.5 !important; */
}

.custom-swiper-slide:not(.custom-swiper-slide-active):hover {
  opacity: 1 !important;
}

.custom-tab {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: #fff;
  padding: 10px 20px;
  transition: background-color 0.3s;
  z-index: 100;
}

.custom-tab::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.custom-tab.van-tab--active {
  background-color: transparent;
}

.custom-tab.van-tab--active::before {
  transform: scaleX(1);
}

.custom-tab:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.custom-tab:hover::before {
  transform: scaleX(1);
}

.swiper-wrapper {
  background-color: transparent !important;
}
.container canvas {
  position: absolute;
  top: 0;
}
.van-tabs,
.van-tabs__nav {
  z-index: 1;
  background: transparent !important;
}
.van-tab {
  color: #fff !important;
}
.swiper-slide-next .sw-flex-no-active{
    display: none !important;
  }
</style>
<style scoped lang="less">
.sw-flex {
  position: relative;
  height: 220px;
  .sw-flex-no-active {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .sw-fleximg {
    width: 100%;
    height: 150px;

    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .sw-flex-r {
    padding: 5px;
    color: #fff;
    width: 100%;
    font-size: 12px;
    line-height: 10px;
    background: rgba(120, 102, 255, 1);

    .tit {
      height: 20px;
      display: flex;
      justify-content: space-between;
      .more {
        border: 1px solid #fff;
        padding: 3px;
        font-size: 12px;
      }
    }
  }
}
</style>